<template>
    <div>
        
        <el-row>
        <el-form
         :model="formData"
          ref="elForm"
            class=""
            label-suffix="："
            v-loading="loading"
         :rules="rules" label-width="120px"
         >    
                <el-col :span="24"  class="dropPanel mt2" style="margin-top:0px;">
                  <!-- 三个图片和一个图片的 -->

                    <el-form-item  v-if="cntype< 3" label="素材1" prop="pic1">
                        <el-upload
                                class="upload-demo"
                                action="index.php?module=API&method=AdsPlace.transfile&format=json"
                                :show-file-list="false"
                                :on-success="handleUploadChange"
                                :before-upload="beforeUpload"
                                :on-error="onUploadError"
                               >
                                <el-button type="primary" icon="el-icon-upload" size="mini"
                                    >点击上传</el-button
                                >
                                <label >支持jpg、gif、png格式</label>
                                <!-- <p class="in_pictureURL">使用网络图片URL</p> -->
                                </el-upload>
                                <!-- 上传图片结果显示url -->
                        <div v-if="formData.pic1" class="word-break">
                                 <a> {{formData.pic1}} </a></div>
                   </el-form-item>

                    <el-form-item v-if="cntype==1" label="素材2" prop="pic2">
                        <el-upload
                                class="upload-demo"
                                action="index.php?module=API&method=AdsPlace.transfile&format=json"
                                :show-file-list="false"
                                :on-success="handleUploadChange2"
                                :before-upload="beforeUpload"
                                :on-error="onUploadError"
                               >
                                <el-button type="primary" icon="el-icon-upload" size="mini"
                                    >点击上传</el-button
                                >
                                <label >支持jpg、gif、png格式</label>
                                <!-- <p class="in_pictureURL">使用网络图片URL</p> -->
                                </el-upload>
                                <!-- 上传图片结果显示url -->
                        <div v-if="formData.pic2" class="word-break">
                                 <a> {{formData.pic2}} </a></div>
                   </el-form-item>
                    <!-- 图片3 -->
                    <el-form-item  v-if="cntype==1" label="素材3" prop="pic3">
                        <el-upload
                                class="upload-demo"
                                action="index.php?module=API&method=AdsPlace.transfile&format=json"
                                :show-file-list="false"
                                :on-success="handleUploadChange3"
                                :before-upload="beforeUpload"
                                :on-error="onUploadError"
                               >
                                <el-button type="primary" icon="el-icon-upload" size="mini"
                                    >点击上传</el-button
                                >
                                <label >支持jpg、gif、png格式</label>
                                <!-- <p class="in_pictureURL">使用网络图片URL</p> -->
                                </el-upload>
                                <!-- 上传图片结果显示url -->
                        <div v-if="formData.pic3" class="word-break">
                                 <a> {{formData.pic3}} </a></div>
                   </el-form-item>
 <!-- 视频素材 -->
                   <el-form-item  v-if="cntype == 3" label="素材1" prop="video">
                        <el-upload
                                class="upload-demo"
                                action="index.php?module=API&method=AdsPlace.transfile&format=json"
                                :show-file-list="false"
                                :on-success="handleUploadChangeVideo"
                                :before-upload="beforeUpload"
                                :on-error="onUploadError"
                               >
                                <el-button type="primary" icon="el-icon-upload" size="mini"
                                    >点击上传</el-button
                                >
                                <label >视频:支持mp4,flv等文件</label>
                                <!-- <p class="in_pictureURL">使用网络图片URL</p> -->
                                </el-upload>
                                <!-- 上传图片结果显示url -->
                        <div v-if="formData.video" class="word-break">
                                 <a> {{formData.video}} </a></div>
                   </el-form-item>
                   <!-- 素材2 的图片 排列在左边还是右边 -->
                    <el-form-item   v-if="cntype == 2" label="素材位置" prop="align">
                      <el-radio-group v-model="formData.align" v-on:change="alignChange" >
                                    <el-radio
                                    v-for="(item, index) in alignOptions"
                                    :key="index"
                                    :label="item.value"
                                    :disabled="item.disabled"
                                    :style="{'margin-right':'10px'}"
                                    >{{ item.label }}</el-radio
                                  >
                                </el-radio-group>
                    </el-form-item>
<!-- 共用 的 标题和 信息来源输入框 -->
      <el-form-item label="标题" prop="subject">
            <el-input             
              v-model="formData.subject"
              autocomplete="off"
              placeholder="请输入信息标题"
              v-on:change="submitForm"
              :style="{ width: '90%' }"
            ></el-input>
          </el-form-item>

           <el-form-item label="来源" prop="become">
            <el-input             
              v-model="formData.become"
              autocomplete="off"
              placeholder="请输入信息来源"
              v-on:change="submitForm"
              :style="{ width: '90%' }"
            ></el-input>
          </el-form-item>
          <!--  -->
            <!-- <el-form-item size="large" >
                    <el-button type="primary" @click="submitForm">提交</el-button>
           
            </el-form-item> -->

                </el-col>
        </el-form>
        </el-row>
    </div>
</template>

<script>
export default {
  components: {},
  props: {
      "cntype":{ type: Number, default: 1},
      "cnrow": { type: undefined, default: undefined }
  },
  data() {
    return {
      loading: false,
      formData: {
        pic1:"",
        pic2:"",
        pic3:"",
        align:"",
        subject:"",
        become:"",
        video:""
      },
      rules:{

      },
      alignOptions:[
        {'label':'左边','value':'left'},
        {'label':'右边','value':'right'},
        {'label':'上方','value':'top'},
        {'label':'下方','value':'bottom'},
      ]
    }
  },
  created(){
      if(this.cnrow){
          for(let i in this.cnrow){
                this.formData[i] = this.cnrow[i];
          }
      }
      
  },
  methods:{
          // 上传备用图片
    handleUploadChange(response, file, fileList){
        this.formData.pic1 = response.data;
        this.loading = false;
        this._triggerEmit();
    },
     handleUploadChange2(response, file, fileList){
        this.formData.pic2 = response.data;
        this.loading = false;
        this._triggerEmit();
    },
     handleUploadChange3(response, file, fileList){
        this.formData.pic3 = response.data;
        this.loading = false;
        this._triggerEmit();
    },
    //上传视频
    handleUploadChangeVideo(response, file, fileList){
        this.formData.video = response.data;
        this.loading = false;
        this._triggerEmit(); 
    },
    beforeUpload(file ){
      this.loading=true;
    },
    //改变排版
    alignChange(){
      this._triggerEmit(); 
    },
    onUploadError(err, file, fileList){
      this.loading = false;
      this.$message({message:"上传失败", type:"error"})
    },
    _triggerEmit() {
           this.$emit("onchange",this.formData);
      },
    //
    submitForm(){
         this._triggerEmit();
    },
  }
}
</script>